<template>
	<view class="release-classify">
		<!-- #ifndef H5 -->
			<view class="">
				请前往H5平台发布
			</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		
		<view class="witer-text">
			<view class="title">
				<view class="label">
					问题标题:
				</view>
				<input class="uni-input-wrapper"  type="text" v-model="title" placeholder="请填写题目" />
			</view>
			<view class="title">
				<view class="label">
					所属分类:
				</view>
				<uni-combox :candidates="candidates" placeholder="请选择所属分类" v-model="city"></uni-combox>
				<view class="label">
					答案类型:
				</view>
				<uni-combox :candidates="typelsit" placeholder="请选择图片模式" v-model="type"></uni-combox>
			</view>
			<view class="title">
			</view>
			<view class="title">
				<view class="label">
					编译格式:
				</view>
				<uni-combox :candidates="bianyis" placeholder="请选择编译格式" v-model="bianyi"></uni-combox>
				<view class="label">
					前后服务:
				</view>
				<uni-combox :candidates="typesssList" placeholder="请选前后" v-model="typesss"></uni-combox>
			</view>
			<view class="title">
				<view class="label textLabel">
					问题题目:
				</view>
				<!-- #ifndef MP-WEIXIN -->
				<lRichTextEditor  :types="bianyi" v-model="content" @change="GetChange">
				</lRichTextEditor>
				<!-- #endif -->
			</view>

			<view class="title" style="margin: 5px 0;">
				<view class="label  ">
					标准答案:
				</view>
				<input class="uni-input-wrapper"  type="text" v-model="rightAnswer" placeholder="可不填" />
			</view>
			<view class="title">
				<view class="label textLabel">
					答案选项:
				</view>
				<view class="answersssss">
					<input v-for="(item, i) in answersList" :key="i" style="margin-right: 5px; width: 100%;" class="uni-input-wrapper"  type="text" v-model="answersList[i]" placeholder="可不填" />
					<view class="tianjAnusconer">
						
						<view class="tianjAnus" @click="addAns">
							添加列
						</view>
						<view class="tianjAnus red" @click="delAns">
							删除列
						</view>
					</view>
				</view>
				
			</view>
			<view class="title">
				<view class="label textLabel">
					问题解析:
				</view>
				<!-- #ifndef MP-WEIXIN -->
				<lRichTextEditor  :types="bianyi" v-model="analysis" @change="GetChanges">
				</lRichTextEditor>
				<!-- #endif -->
			</view>

			<view class="title">
			</view>
			<button class="submit" type="primary" @click="onSubmit">发 布</button>


		</view>
		
		<!-- #endif -->
		
		<!-- #ifdef H5 -->
		<view class="show-text">
				<!-- #ifndef MP-WEIXIN -->
				<!-- 问题 -->
			<mp-html  container-style="padding:15px 0" markdown :content="content" domain="https://6874-html-foe72-1259071903.tcb.qcloud.la/demo"
			 lazy-load scroll-table selectable use-anchor show-with-animation></mp-html>
			 <!-- 解释 -->
			<mp-html  container-style="padding:15px 0" markdown :content="analysis" domain="https://6874-html-foe72-1259071903.tcb.qcloud.la/demo"
			 lazy-load scroll-table selectable use-anchor show-with-animation></mp-html>
				
				<!-- #endif -->
		</view>

		<!-- #endif -->


	</view>
</template>

<script>
	import marked from 'marked'
	import uPase from '@/components/gaoyia-parse/parse.vue'
	import {
		mapState
	} from "vuex"
	import uniCombox from "../../uni_modules/uni-combox/components/uni-combox/uni-combox.vue"
	import uniDatetimePicker from "../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue"
	// #ifndef MP-WEIXIN
	import lRichTextEditor from '../lRichTextEditor/lRichTextEditor.vue'
	
	// #endif
	export default {
		data() {
			return {
				answersList:[null,null,null,null],
				title:'',
				WatchValue:'',
				rightAnswer:'',
				content: '',
				analysis: '',
				single: '',
				bianyi:'markdown',
				typesss:'',
				typesssList:[
					'前端',
					'后端',
				],
				bianyis:[
					'普通编译',
					'markdown'
				],
				typelsit:[
					'单选题',
					'多选题',
					'简答题',
				],
				type:'单选题',
				candidates: [
					'JavaScript',
					'HTML-CSS',
					"jQuery",
					'前端框架',
					'项目优化',
					'Linux',
					'JAVA',
					'mySQL',
					'其他',
				],
				city: 'JavaScript',
				cover:[]
			};
		},
		watch:{
		},
		components: {
			uniCombox,
			uniDatetimePicker,
			uPase,
			// #ifndef MP-WEIXIN
			lRichTextEditor,
			
			// #endif
		},
		computed: {
			...mapState(['userinfo'])
		},
		methods: {
			addAns(){
				console.log(this.answersList);
				this.answersList.push(null)
			},
			delAns(){
				console.log(this.answersList);
				this.answersList.pop()
			},
			GetChange(e) {
				this.content = e
				console.log(e)
			},
			GetChanges(e) {
				this.analysis = e
				console.log(e)
			},
			onSubmit(){
				console.log(!this.city,!this.rightAnswer ,!this.title ,!this.analysis,!this.type,'ddddddddddddddddddd');
				if( !this.city||!this.rightAnswer ||!this.title  ||!this.analysis ||!this.type){
					return uni.showToast({
						title:"有空未填",
						icon:'none'
					})
				}
				this.add_test()
			},
			async add_test(imagePath){
				let test = await this.$api.add_test({
					"title":this.title,
					"center":this.content,
					"answers":this.answersList,
					"rightAnswer":this.rightAnswer,
					"analysis":this.analysis,
					"type":this.type,
					"city":this.city,
					"typesss":this.typesss
				})
				if (!test) {
					uni.showToast({
						title:'发布失败',
						icon:'none'
					})
					uni.showToast({
						title:"请减少文字试一下",
						icon:'none'
					})
				}else{
					uni.showToast({
						title:'发布成功'
					})
					
						this.title = ""
						this.content = ""
						this.answersList = [null,null,null,null]
						this.rightAnswer = ""
						this.analysis = ""
				}
				
			},
		}
	}
</script>

<style scoped lang="scss">
	.release-classify {
		display: flex;
			height: 100%;
.uni-input-wrapper{
	width: 100%;
	border: 1px solid #ddd;
	border-radius: 5px;
	background-color: #fff;
	height: 42px;
}
.submit{
	width: 100px;
	background-color: $my-bg-color;
}
		.witer-text {
			// #ifdef H5
			width: 50%;

			padding-right: 10px;
			// #endif
			.title {
				display: flex;
				align-items: center;
				width: 100%;
				.answersssss{
					display: flex;
					flex-direction: column;
				width: 100%;
				
				.tianjAnusconer{
					display: flex;
					align-items: center;
					margin-bottom: 10px;
					justify-content: space-around;
					.tianjAnus{
						background-color: $my-bg-color;
						padding: 5px 10px ;
						color: #fff;
					}
					.red{
						background-color: red;
					}
				}
					input{
						flex: 1;
						height: 42px !important;
						width: 100%;
						margin-bottom: 5px;
					}
				}
				.label {
					color: #555;
					font-weight: bold;
					font-size: 14px;
					margin-right: 10px;
					flex-shrink: 0;
					margin-left: 20px;
				}
				.textLabel{
					align-self: flex-start;
				}
			}

		}

		.show-text {
			flex: 1;
			overflow-x: auto;
			padding-left: 10px;
			border-left: 1px solid #333;
			height: 100%;
		}
	}
</style>
